<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>使用document对象操作页面</title>
    <style type="text/css">
        body,
        input,
        div,
        p,
        {
        margin: 0;
        padding: 0;
        }

        body {
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 25px;
        }

        .content {
            width: 650px;
            margin: 0 auto;
        }

        .content img {
            float: left;
            width: 150px;
        }

        .r {
            float: left;
            width: 650px;
        }

        input[name="changeBook"] {
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }

        input[name="season"] {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="content">

        <div class="r">
            <div id="book">大数据技术最靓的仔</div>
            <input name="changeBook" value="换换名称" type="button" onclick="changeBookName()"/><br>
            本学期课程：
            <input name="season" type="text" value="大数据呈现技术" />
            <input name="season" type="text" value="智能推荐技术与应用" />
            <input name="season" type="text" value="数据统计分析" />
            <input name="season" type="text" value="大学语文" /><br><br>
            <input name="b2" type="button" value="获取input内容" onclick="showInputContent()"/>
            <input name="b3" type="button" value="获取课程名称" onclick="showCourseNames()"/>
            <input name="b4" type="button" value="清空页面内容" onclick="clearPageContent()"/>
            <input name="b4" type="button" value="刷新整个页面" onclick="refreshPage()"/><br><br>
            <input name="b4" type="button" value="弹出你真棒提示框，用户点击确定，在页面中写good,用户点击取消关闭整个窗口" onclick="alertGood()"/>

        </div>
    </div>
    <script type="text/javascript">
        function changeBookName() {
            document.getElementById('book').innerText = '帅比';
        }

        function showInputContent() {
            var inputs = document.getElementsByName('season');
            for (var i = 0; i < inputs.length; i++) {
                console.log(inputs[i].value);
            }
        }

        function showCourseNames() {
            alert('课程名称为：大数据呈现技术, 智能推荐技术与应用, 数据统计分析, 大学语文');
        }

        function clearPageContent() {
            document.body.innerHTML = '';
        }

        function refreshPage() {
            location.reload();
        }

        function alertGood() {
            if (confirm('你真棒')) {
                document.write('good');
            } else {
                window.close();
            }
        }
    </script>
</body>

</html>